本日小作品：
https://codepen.io/linchinhsuan/pen/XWdLYNX

var btn = document.getElementById("btn");
var list = document.querySelector(".noteList");
var nowList = JSON.parse(localStorage.getItem("note")) || [];

基本的宣告變數，從上到下分別是新增的按鈕、ul、要存到localStorage的陣列。

function upData(){
    //清除舊資料
    list.innerHTML = "";
    //從localStorage拿資料
    var getData = localStorage.getItem("note");
    var loadList = JSON.parse(getData);
    var len = loadList.length;
    for(var i=0;i<len;i++){
        // 創造新li
        var item = document.createElement("li");
        item.textContent = loadList[i];
        list.appendChild(item);
        // 刪除鍵
        var icon = document.createElement("span");
        icon.className = "material-icons delBtn";
        icon.textContent = "clear";
        icon.dataset.num = i;
        item.appendChild(icon);
    }
}

本作品最核心的函式，基本上每次資料更新就要使用。
會先清空ul內的所有東西。

var getData = localStorage.getItem("note");
var loadList = JSON.parse(getData);

接著就是從localStorage拿資料出來，轉換成陣列loadList。
之後就是跑for迴圈將陣列的內容一一寫入li然後新增到ul底下。

icon.dataset.num = i;

這裡是刪除的那個叉叉的屬性，透過dataset我們可以自定義屬性，透過for迴圈依序在每一個叉叉上綁上data-num = i，這樣之後刪除事件的時候就可以透過這個屬性判斷此時使用者要刪除的是哪一個物件。

list.addEventListener("click",function(e){
    if(e.target.nodeName !== "SPAN"){return};
    //刪除陣列中的那一個
    var num = e.target.dataset.num;
    nowList.splice(num,1);
    //更新localStorage
    var itemString = JSON.stringify(nowList);
    localStorage.setItem("note",itemString);
    //整體更新
    upData()
},false)

刪除的點擊事件，在叉叉上綁定一個點擊事件，用if判定若不是點到叉叉的話就會return，強制讓後面的程式碼不會執行。

var num = e.target.dataset.num;
nowList.splice(num,1);

把剛剛設定的data-num撈出來，會得到要被刪除的那個元素的編號，接著用陣列的刪除語法.splice(a,b)（從a開始刪除b個），從那個編號開始刪除一個（也就是把點到的那個刪了）。

var itemString = JSON.stringify(nowList);
localStorage.setItem("note",itemString);
//整體更新
upData()

最後，如果只是刪掉之後關掉網頁重開結果還是一樣，因為localStorage裡面的資料並沒有改變，所以要將新的陣列結果寫入localStorage。
最後再跑一次upData()讓新陣列渲染上去並標上新的編號等等。

－－－

本日結語：
今天是二十天，今天練習localStorage，localStorage就像是瀏覽器的小資料庫的感覺，網頁關掉之後重新打開看到上次的東西還在真的覺得很神奇。但這次難度也確實比以往高上很多，如有寫錯之處麻煩各路高手指教><